<!DOCTYPE html>
<html lang="zxx" class="js">

<head>
    <base href="../">
    <meta charset="utf-8">
    <meta name="author" content="Softnio">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description"
        content="A powerful and conceptual apps base dashboard template that especially build for developers and programmers.">
    <!-- Fav Icon  -->
    <link rel="shortcut icon" href="./images/favicon.png">
    <!-- Page Title  -->
    <title>修改个人账号信息</title>
    <!-- StyleSheets  -->
    <link rel="stylesheet" href="./assets/css/dashlite.css?ver=2.2.0">
    <link id="skin-default" rel="stylesheet" href="./assets/css/theme.css?ver=2.2.0">
    <style>
        .big_font_size * {
            font-size: 14px;
        }

        .avatar-upload {
            display: none;
        }

        #imgAvatar {
            position: absolute;
            height: 100%;
            width: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url(https://gravatar.com/avatar/cd00043df0b7edfee62e7fda7fd47af0?d=https%3A%2F%2Fassets.codepen.io%2Finternal%2Favatars%2Fusers%2Fdefault.png&fit=crop&format=auto&height=80&version=0&width=80);
        }

        #hideLayer {
            width: 60px;
            height: 20px;
            background-color: #ccc;
            z-index: 99;
            position: absolute;
            bottom: 0;
            opacity: 0.8;
            display: none;
        }

        .imgbox {
            border-radius: 16%;
            height: 60px;
            width: 60px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
    </style>
</head>

<body class="nk-body bg-lighter npc-general has-sidebar " ng-app="alienPlants" ng-controller="userController"
    ng-init="initUserInfoById()">
    <div class="nk-app-root">
        <!-- main @s -->
        <div class="nk-main ">
            <!-- sidebar @s -->
            <div class="nk-sidebar nk-sidebar-fixed is-dark " data-content="sidebarMenu" id="sliderModel">
            </div>
            <!-- sidebar @e -->
            <!-- wrap @s -->
            <div class="nk-wrap ">
                <!-- main header @s -->
                <div class="nk-header nk-header-fixed is-light" id="headerSilder">
                </div>
                <!-- main header @e -->
                <!-- content @s -->
                <div class="nk-content ">
                    <div class="container-fluid">
                        <div class="nk-content-inner">
                            <div class="nk-content-body">
                                <div class="components-preview wide-md mx-auto">
                                    <div class="nk-block nk-block-lg">
                                        <div class="nk-block-head-content">
                                            <h2 class="nk-block-title page-title text-center font-weight-light">个人信息
                                            </h2>
                                            <p class="text-center mb-4"
                                                style="color: #5f6368;font-weight: 400;font-size: 1rem;">
                                                您在后台管理系统中的账户基本信息</p>
                                        </div><!-- .nk-block-head-content -->
                                        <div class="avatar-upload">
                                            <input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />
                                            <label for="imageUpload"></label>
                                        </div>
                                        <div class="card card-preview px-0">
                                            <div class="card-inner">
                                                <div class="preview-block">
                                                    <span class="h4 font-weight-light">基本信息</span>
                                                    <form class="form-validate is-alter pt-4 big_font_size">
                                                        <div class="row gy-4">
                                                            <div class="col-sm-12">
                                                                <div class="form-group" style="display: flex;justify-content: space-between;align-items: center;">
                                                                    <label class="mb-0"
                                                                        style="cursor:default!important;">修改用户头像</label>
                                                                    <div>—— 添加头像来个性化您的账号 ——</div>
                                                                    <div class="form-control-wrap">
                                                                        <div class="form-icon form-icon-left">
                                                                            <em class="icon ni ni-user"></em>
                                                                        </div>
                                                                         <label for="imageUpload">
                                                                        <div class="form-control-wrap imgbox">
                                                                            <div id="imgAvatar"></div>
                                                                            <div class="text-center" id="hideLayer">
                                                                                <em class="icon ni ni-camera"></em>
                                                                            </div>
                                                                        </div>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="form-label"
                                                                        for="default-01">用户名</label>
                                                                    <div class="form-control-wrap">
                                                                        <div class="form-icon form-icon-left">
                                                                            <em class="icon ni ni-user"></em>
                                                                        </div>
                                                                        <input type="text" class="form-control" required
                                                                            id="default-01" name="userName"
                                                                            placeholder="请输入用户名 "
                                                                            ng-model="currentUserInfo.userName">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="form-label"
                                                                        for="default-02">真实姓名</label>
                                                                    <div class="form-control-wrap">
                                                                        <div class="form-icon form-icon-left">
                                                                            <em class="icon ni ni-user-alt"></em>
                                                                        </div>
                                                                        <input type="text" class="form-control" required
                                                                            id="default-02" name="realName"
                                                                            placeholder="请输入真实姓名"
                                                                            ng-model="currentUserInfo.realName">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="form-label"
                                                                        for="default-05">部门</label>
                                                                    <div class="form-control-wrap">
                                                                        <div class="form-icon form-icon-left">
                                                                            <em class="icon ni ni-home-alt"></em>
                                                                        </div>
                                                                        <input type="text" class="form-control" required
                                                                            id="default-05" name="deptName"
                                                                            placeholder="请输入部门"
                                                                            ng-model="currentUserInfo.deptName">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="form-label"
                                                                        for="default-06">手机号</label>
                                                                    <div class="form-control-wrap">
                                                                        <div class="form-icon form-icon-left">
                                                                            <em class="icon ni ni-mobile"></em>
                                                                        </div>
                                                                        <input type="text" class="form-control" required
                                                                            id="default-06" name="userPhone"
                                                                            placeholder="请输入手机号"
                                                                            ng-model="currentUserInfo.userPhone">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="form-label"
                                                                        for="default-07">邮箱</label>
                                                                    <div class="form-control-wrap">
                                                                        <div class="form-icon form-icon-left">
                                                                            <em class="icon ni ni-mail"></em>
                                                                        </div>
                                                                        <input type="email" class="form-control"
                                                                            required id="default-07" name="userEmail"
                                                                            placeholder="请输入邮箱"
                                                                            ng-model="currentUserInfo.userEmail">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-12">
                                                                <div class="form-group">
                                                                    <label class="form-label"
                                                                        for="default-08">用户类型</label>
                                                                    <div class="form-wrap form-control-wrap">
                                                                        <select
                                                                            class="form-select form-select-sm form-control"
                                                                            ng-model="currentUserInfo.usertype"
                                                                            id="default-08" name="usertype"
                                                                            data-placeholder="{{currentUserInfo.userType}}:{{currentUserInfo.userType==0?'后台管理':currentUserInfo.userType==1?'部门管理':currentUserInfo.usertype==2?'特殊身份':'普通用户'}}"
                                                                            required>
                                                                            <option value=""></option>
                                                                            <option value="0">0:后台管理</option>
                                                                            <option value="1">1:部门管理</option>
                                                                            <option value="2">2:特殊身份</option>
                                                                            <option value="3">3:普通用户</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <button type="submit"
                                                                        class="btn btn-primary mt-3 mr-5 mb-4"
                                                                        style="float: right;"
                                                                        ng-click="changeUserInfo()">提交修改</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div><!-- .card-preview -->
                                    </div><!-- .nk-block -->
                                </div><!-- .components-preview -->
                            </div>
                        </div>
                    </div>
                </div>
                <!-- content @e -->
                <!-- footer @s -->
                <div class="nk-footer">
                    <div class="container-fluid">
                        <div class="nk-footer-wrap">
                            <div class="nk-footer-copyright"> &copy; 2020 DashLite. Template by <a
                                    href="http://www.bootstrapmb.com/" target="_blank">Softnio</a>
                            </div>
                            <div class="nk-footer-links">
                                <ul class="nav nav-sm">
                                    <li class="nav-item"><a class="nav-link" href="#">Terms</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#">Privacy</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- footer @e -->
            </div>
            <!-- wrap @e -->
        </div>
        <!-- main @e -->
    </div>
    <!-- app-root @e -->

    <!-- JavaScript -->
    <script src="./assets/js/bundle.js?ver=2.2.0"></script>
    <script src="./assets/js/scripts.js?ver=2.2.0"></script>
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#imgAvatar').css('background-image', 'url(' + e.target.result + ')');
                    $('#imgAvatar').hide();
                    $('#imgAvatar').fadeIn(650);
                    console.log(e.target.result)
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imageUpload").change(function () {
            readURL(this);
        });

        $("#imgAvatar").mouseover(function () {
            $("#hideLayer").css("display", "block")
        })
        $("#imgAvatar").mouseout(function () {
            $("#hideLayer").css("display", "none")
        })
    </script>
    <script src="./assets/js/angular/angularjs/angular.min.js"></script>
    <script src="./assets/js/angular/angularjs/angular-route.min.js"></script>
    <script src="./assets/js/angular/base.js"></script>
    <script src="./assets/js/angular/service/userService.js"></script>
    <script src="./assets/js/angular/controller/userController.js"></script>
</body>

</html>